// 函数组件
import './css/AccountSetting.less'
import '../../css/public.less'
import React, { useState, useEffect, useContext } from 'react';
import { Button, Upload, message, Form, Input } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { Setting } from '../../../api/lf'
function AccountSetting() {
    const [userInfo, setUserInfo] = useState<userType>()

    interface userType {
        emplId: number,
        emplName: string,
        emplNumber: string,
        roleName: string
    }


    useEffect(() => {
        setUserInfo(JSON.parse(sessionStorage.getItem('userInfo') || '{}'))


    }, [])





    //表单成功的回调
    const onFinish = (values: any) => {
        console.log('Success:', values);
        Setting({ admin: values.admin, email: values.email, name: values.name, newPassword: values.newPassword, oldPassword: values.oldPassword, phone: values.phone }).then(res => {
            console.log('修改成功', res);
            message.success('修改成功', 2)
        }).catch(err => {
            console.log('修改失败', err);
            message.error('修改失败', 2)
        })
    };
    //表单失败的回调
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };



    return (
        <div className='AccountSetting'>
            <div className='page-top'>
                {/* 左边标题 */}
                <div className='page-title'>
                    <p>账户设置</p>
                </div>
            </div>
            <div className='content'>
                <div style={{ backgroundColor: '#f2f2f2', height: 40, lineHeight: "40px", }}><p style={{ marginLeft: "20px" }}>账号设置</p></div>

                <div className='from' style={{ marginTop: '30px' }}>

                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 700, minWidth: 500 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="账号"
                            name="admin"

                            rules={[{ message: '请输入你的账号!' }]}
                        >
                            <Input placeholder={userInfo?.emplNumber} />
                        </Form.Item>
                        <Form.Item
                            label="角色"
                            name="roleName"

                            rules={[{ message: '请输入你的账号!' }]}
                        >
                            <Input placeholder={userInfo?.roleName} />
                        </Form.Item>

                        <Form.Item
                            label="姓名"
                            name="name"

                            rules={[{ message: '请输入你的姓名!' }]}
                        >
                            <Input placeholder={userInfo?.emplName} />
                        </Form.Item>

                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={[{ message: '请输入你的邮箱!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="手机号"
                            name="phone"
                            rules={[{ message: '请输入你的手机号!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="旧密码"
                            name="oldPassword"
                            rules={[{ message: '请输入你的旧密码!' }]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item
                            label="新密码"
                            name="newPassword"
                            rules={[{ message: '请输入你的新密码!' }]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item
                            label="确认密码"
                            name="isPassword"
                            rules={[{ message: '请确认你的密码!' }]}
                        >
                            <Input.Password />
                        </Form.Item>


                        <Form.Item wrapperCol={{ offset: 12, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </div>

            </div>

        </div>
    )
}

export default AccountSetting